<template>
	<view class="content">
		
		<view class="Popular">
			<view class="pop_content">
				
				
				<view class="pop_item" v-for="(item,index) in datalist" :key="index">
					<navigator :url="'/pages/me/content/houseDetail?house_id='+item.house_id">
					<view class="topBox">
						<view class="left">
							<!-- {{item.pic}} -->
							<image v-if="item.image" :src="siteUrl+item.image" mode="scaleToFill"></image>
						
							<image v-else :src="siteUrl+item.images.split(',',1)" mode="scaleToFill"></image>
													
						
						</view>
						<view class="right">
							<view class="name">{{item.title}}</view>
							<view class="address">{{item.location_near}}</view>
							<view class="tags" >
								<text class="tag" v-for="(tag,ind) in item.tags" :key="ind">{{tag}}</text>
							</view>
							<view class="prices">
								<view :class="[item.isActive?'price':'unprice']">{{item.price}}元/月</view>
								<view :style="{display:(item.isActive?'none':'block')}" class="existence">已租</view>
							</view>
						</view>
					</view>
					</navigator>
					
					<view class="bottomBox">
						<view class="left">
							<view class="Tenant">
								租客：{{item.renter_name}}
							</view>
							<view class="checkTime">
								入住：{{item.intime}}
							</view>
						</view>
						<view class="right">
							<button class="contract" @click="checkContract(item.id)">查看合同</button>
						</view>
					</view>
				</view>
				
				<uni-load-more  :loadingType="loadingType" :contentText="contentText" :status="status"></uni-load-more>
				
			</view>
		</view>
		
		
		<s-popup custom-class="demo-popup" position="center" v-model="visible">
		  
		  
		  <image :src="item"  v-for="(item,index) in imageList" class="aimage" ></image>
		    
		
		  	  
		  	  		  
		</s-popup>
		
		
		
	</view>
</template>

<script>
	var _self,
	page = 1,
	timer = null;
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import sPopup from '@/components/s-popup/index.vue'
	export default {
		components:{sPopup,uniLoadMore},
		data() {
			return {
				siteUrl:this.websiteUrl,
				status: 'more',
				loadingText: '加载中...',
				loadingType: 2,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
				    contentdown:'上拉显示更多',
				    contentrefresh: '正在加载...',
				    contentnomore: '没有更多数据了'
				},
				title: 'index',
				visible:false,
				imageList:[],
				datalist:[
					{
						url:'/detail/',
						pic:'../../static/img/room1.png',
						name:'沙园复式一房一厅，两层',
						address:'3号线客村站 200米',
						tags:['一房一厅','免半月租'],
						price:'1800',
						isActive:true,
						tenant:'李小雨',
						checkTime:'2019/09/20'
					},
					{
						url:'/detail/',
						pic:'../../static/img/room1.png',
						name:'沙园复式一房一厅，两层',
						address:'3号线客村站 200米',
						tags:['一房一厅','免半月租'],
						price:'1800',
						isActive:false,
						tenant:'李小雨',
						checkTime:'2019/09/20'
					}
				],
				
			}
		},
		onLoad() {
			_self = this
			this.getdatalist()
		},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			
		    this.getdatalist()					
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }		   
			 _self.getmorenews();
		},
		methods: {
			getmorenews: function() {
				if(_self.status !== 'more'){
					return false
				}						    
				_self.status = 'loading'
			    uni.showNavigationBarLoading();//显示加载动画
			    uni.request({
			        url:this.websiteUrl+'/api.php/center/mydeal?page='+page,
			        method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {
						token:uni.getStorageSync('token'),
						
					},					
			        success: function(res) {			           																	
			            if (res.data.data.data.length == 0) {//没有数据			                
							_self.status = 'noMore'							
			                uni.hideNavigationBarLoading();//关闭加载动画							
			                return false;
			            }
			            page++;//每触底一次 page +1										
			            _self.datalist = _self.datalist.concat(res.data.data.data);//将数据拼接在一起			           
						_self.status = 'more'					
			            uni.hideNavigationBarLoading();//关闭加载动画
			        }
			    });
			},
			
			
			
			
			
			
			getdatalist(){
				page = 1;
				_self.status = 'more'
				uni.showNavigationBarLoading();	
				uni.request({
					url: this.websiteUrl+'/api.php/center/mydeal?page=1',
					method: 'POST',
					data: {
						token:uni.getStorageSync('token')
					},
					header: {
						'content-type':'application/x-www-form-urlencoded'				
					},
					success:function(res){
						if(res.data.code == 1){
							page++
							_self.datalist = res.data.data.data
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
					},
					
				});
			},
			checkContract($id){
				uni.request({
					url: this.websiteUrl+'/api.php/center/agreement',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'					
					},
					data: {agreement_id:$id},
					success:function (res) {						
						_self.imageList = res.data.data					
						_self.visible = true						
					},
					
				});			
			}
		}
	}
</script>

<style>
	.aimage{
		
	}
	.content {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #4F5861;
	}
	.Popular{
		width: 100%;
		/* margin-top: -10upx; */
	}
	.pop_title{
		width: 100%;
		height: 90upx;
		text-align: center;
		font-size: 15upx;
		line-height: 90upx;
		background: white;
		border-radius: 10upx 10upx 0 0;
	}
	.pop_content{
		overflow: hidden;
		width: 100%;
		background: white;
	}
	.pop_item{
		padding: 20upx;
	}
	.topBox{
		display: flex;
		justify-content: space-between;
	}
	.pop_item .topBox .left{
		width: 240upx;
		height: 180upx;
	}
	.pop_item .topBox .left image{
		width: 240upx;
		height: 180upx;
	}
	.pop_item .topBox .right{
		width: 440upx;
		height: 200upx;
	}
	.pop_item .topBox .right .name{
		width: 100%;
		height: 40upx;
		font-size: 32upx;
	}
	.pop_item .topBox .right .address{
		width: 100%;
		height: 40upx;
		margin: 10upx 0;
		color: #707071;
		font-size: 24upx;
		line-height: 40upx;
	}
	.pop_item .topBox .right .tags{
		display: flex;
	}
	.pop_item .topBox .right .tag{
		padding: 0 5upx;
		margin:0 5upx;
		color: #C0C0C0;
		font-size: 24upx;
		border: solid 1px #C0C0C0;
	}
	.pop_item .topBox .right .prices{
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.pop_item .topBox .right .prices .price{
		
		color: #FF4C4C;
		font-size: 30upx;
		line-height: 40upx;
		font-weight: bold;
	}
	.pop_item .topBox .right .prices .unprice{
		
		color: #999999;
		font-size: 30upx;
		line-height: 40upx;
		font-weight: bold;
	}
	.pop_item .topBox .right .prices .existence{
		width: 60upx;
		height: 30upx;
		background: #CCCCCC;
		color: white;
		font-size: 24upx;
		line-height: 30upx;
		text-align: center;
	}
	.pop_item .bottomBox{
		display: flex;
		justify-content: space-between;
		height: 100upx;
		font-size: 26upx;
		line-height: 100upx;
	}
	.pop_item .bottomBox .left{
		display: flex;
		justify-content: flex-start;
		width: 68%;
	}
	.pop_item .bottomBox .left .Tenant{
		width: 35%;
		margin-right: 20upx;
	}
	.pop_item .bottomBox .left .checkTime{
		width: 50%;
	}
	.pop_item .bottomBox .right{
		width: 30%;
	}
	.pop_item .bottomBox .right .contract{
		margin-top: 20upx;
		width: 180upx;
		height: 60upx;
		font-size: 26upx;
		line-height: 60upx;
		border-radius: 30upx;
		border: solid 1upx #CCCCCC;
		outline: none;
	}
	
</style>
